<template>
<transition name="fade">
  <div class="box">
    <header class="photo-header">
      <router-link tag="span" :class="item.icon" :to="item.path" v-for="(item, index) of list" :key="index"></router-link>
      <span>相册制作</span>
    </header>
    <div class="photo-content">
      <ul class="photo-content-ul">
        <li v-for="(photo, photoindex) of photolist" :key="photoindex">
          <div class="photo-content-ul-pro">
            <img :src="photo.pimg" alt="">
          </div>
          <p><span>{{photo.pname}}</span><span :class="photo.icon"></span></p>
        </li>
      </ul>
    </div>
  </div>
</transition>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import Qs from 'qs'
import { Swipe, SwipeItem, Lazyload } from 'mint-ui'
Vue.use(Swipe, SwipeItem, Lazyload)
export default {
  data () {
    return {
      list: [
        {
          path: '/mine',
          icon: 'iconfont icon-fanhui2'
        }
      ],
      photolist: [
        {
          pimg: 'https://gss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2018-12-13/698b318e319446eb28f96f5880ed0aef.png',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9',
          icon: 'iconfont icon-shoucang1'
        },
        {
          pimg: 'http://img0.imgtn.bdimg.com/it/u=2776372778,101653018&fm=11&gp=0.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9',
          icon: 'iconfont icon-shoucang1'
        },
        {
          pimg: 'http://img1.imgtn.bdimg.com/it/u=3812078970,2348383319&fm=11&gp=0.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9',
          icon: 'iconfont icon-shoucang1'
        },
        {
          pimg: 'http://img2.imgtn.bdimg.com/it/u=3926205875,2573315149&fm=11&gp=0.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9',
          icon: 'iconfont icon-shoucang1'
        },
        {
          pimg: 'http://img5.imgtn.bdimg.com/it/u=91385604,2601126449&fm=11&gp=0.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9',
          icon: 'iconfont icon-shoucang1'
        },
        {
          pimg: 'https://f10.baidu.com/it/u=1521485790,2088363864&fm=76',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9',
          icon: 'iconfont icon-shoucang1'
        },
        {
          pimg: 'http://img0.imgtn.bdimg.com/it/u=2519097496,1395607076&fm=11&gp=0.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9',
          icon: 'iconfont icon-shoucang1'
        },
        {
          pimg: 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1544689527&di=b7490f28e843d468649902e099b58cfd&src=http://bpic.588ku.com/element_origin_min_pic/16/10/22/30a3031fd5cbac8612b01095b7604f8d.jpg!/fwfh/804x804/quality/90/unsharp/true/compress/true',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9',
          icon: 'iconfont icon-shoucang1'
        }
      ]
    }
  },
  created () {
    let data = {
      token: '7qwN83Y2xI2xasQikfLHvwFwLQKxxk5wZyi6Ej+So2Vx1864is3FP2c+zr18HzNAC7fzHZHbmLDWwJraATqJ+cjyp9aSekyCKPoiVit0kHqEJYNu3/HhVAqSW1YJBo9GtG4aH2RSdJ194HC4Slo8wLMBKgvd61ZSGeyJJ80HEnPtUff6/csmpBFsSlXoVRN+DygYwJsRRi2im1HkL0zDJr9GL1nJSxfJLr2+3dEGuEGyDJYuS6aGVaSzY7BCGX2OBspUNJw5BuYR/t3hvUWPCYbfCSehfNHALihJVTJ39LLJ9d/uyc4ciyBA5ZbusTst'
    }
    axios({
      method: 'post',
      url: 'http://10.8.162.12:8081/minecollection.do',
      data: Qs.stringify(data)
    })
      .then((res) => {
        console.log(res)
        const obj = res.data.list
        this.users = obj
        console.log(this.users)
      })
      .catch(function (error) {
        console.log(error)
      })
  }
}
</script>

<style lang="scss">
// 头部
.photo-header{
  width:3.75rem;
  height:0.42rem;
  line-height:0.42rem;
  background:rgb(252, 218, 218);
  text-align: center;
  span{
    &:nth-child(1){
     font-size:0.16rem;
     float:left;
     margin-left:0.15rem;
     font-weight: 700;
    };
    &:nth-child(2){
      display:block;
      font-size:0.14rem;
      float:left;
       margin-left:1.3rem;
    }
  }
}
// 相册展示部分
.photo-content{
  overflow-y:scroll;
  flex:1;
  .photo-content-ul{
      width:3.41rem;
      flex:1;
      background:0;
      margin-left:0.17rem;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      li{
        width:1.67rem;
        height:2rem;
        margin-top:0.1rem;
        margin-left: 0.02rem;
      .photo-content-ul-pro{
           position: relative;
           width:1.67rem;
           height:1.6rem;
           background:rgb(155, 38, 25);
           .photo-name{
             position: absolute;
             top:0;
             left:0;
             font-size:0.14rem;
             color:#333;
             padding-left:0.11rem;
             padding-top:0.1rem;
           }
           img{
               display: block;
               width:100%;
               height:100%;
             }
          }
        p:nth-of-type(1){
           height:0.4rem;
           line-height:0.4rem;
           background:#F9F9F9;
           display: flex;
           justify-content: space-between;
           padding-left:0.08rem;
           padding-right:0.08rem;
           span{
             &:nth-child(1){
               font-size:0.14rem;
             }
             &:nth-child(2){
               font-size:0.18rem;
             }
           }
        }
      }
    }
}
</style>
